body {
  margin: 0;
  padding: 0;
  color: transparent !important;
  position: absolute;
  height: 100%;
  width: 100%;
  color:#cfd6e3;
  font-size: 1rem;
}

.item-Page {
  width: 37.2vh;
  height: calc(100vh - 4vh);
  position: absolute;
  z-index: 2;
  top: 2vh;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  color: #fff;
  padding-top: 5rem;
  pointer-events: none; /* 忽略鼠标事件 */
  /* overflow-y: auto; */
}


.left-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  pointer-events: visible;
}

.meun-title {
  width: 100%;
  display: flex;
  height: 3.2vh;
  /* background: url("@/assets/layer/left_components.png") no-repeat; */
  background-size: 33vh 100%;
  /* padding: 0vh 0vh 0vh 4.7vh; */
  background-position-x: 4vh;
  align-items: center;
  color: #fff;
  font-weight: bold;
  font-family: PangMenZhengDao;
  min-height: 3vh;
  font-size: 1.5vh;
  position: relative;
}

.rc-virtual-list-holder{
  background: #130b0b;
  border-radius: 8px;
}
.ant-select-dropdown{
  background: #130b0b;
  font-size: 22px;
}
.ant-select-selection-item{
  line-height: 44px;
}
.ant-select-item{
  padding: 0rem 1rem !important;
  margin: 0rem 0.4rem;
  font-size: 14px;
  line-height: 20px;
}
.ant-select-item-option-content {
  flex: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 32px;
}
.ant-select-item-option-selected{
  background-color: #09325f !important;
}
.ant-select-item-option-content{
  color: #fff !important;
}
.ant-select-selection-item{
  color: #fff !important;
}
.ant-select-arrow{
  top: 33%;
  color: #fff !important;
}
.size_color_1{
  color:#cfd6e3;
};
.size_color_2{
  color:#ffffff;
};
.size_color_3{color:#51f8fb;}
.size_color_4{color:#ff3c40;}
.font_size_14{font-size: 1.4rem;}
.font_size_2{font-size: 2rem;}
#app{
  position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0px;
    top: 0px;
}
#bg3d{
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0px;
  overflow: hidden;
  top: 0px;
}
.title-tip {
  background: #00a0e9;
  color: #fff;
  padding: 0px 4px;
  border-radius: 4px;
  display: flex;
  font-size: 12px;
  align-items: center;
  padding: 2px 10px;
  font-size: 16px;
}
.title-content{
  pointer-events: none;
  pointer-events: auto;
}
.title-img{
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 50%;
}
.title-img img{
  width: 100%;
  height: 100%;
}
.title-tip-hide{
  display: none;
  position: absolute;
  background: #4CAF50;
  color: #fff;
  margin-top: -55px;
  width: 120px;
  text-align: center;
  margin-left: -25px;
}
.title-content:hover .title-tip-hide{
  display: block;
}

.title-tip .left-icon {
  height: 10px;
  width: 3px;
  margin-right: 3px;
  background: #26bbff;
}

.tip{
  background: #000;
  color: #fff;
  padding: 5px;
  border-radius: 2px;
  backdrop-filter: blur(15px);
  font-size: 12px;
}
.tip::after {
  content: '';
  position: absolute;
  bottom: -10px; /* 调整这个值可以改变三角的位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;
}


.data-msg::after {
  content: '';
  position: absolute;
  bottom: -10px; /* 调整这个值可以改变三角的位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #103e628c;
}

.safety-default {
  width: 11rem;
  height: 2.5rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/layer/safety-default.png") no-repeat;
  background-size: 100% 2.6rem;
  margin-right: 3rem;
}

.safety-err {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 11rem;
  height: 2.5rem;
  background: url("@/assets/layer/safety-err.png") no-repeat;
  background-size: 100% 2.6rem;
  margin-right: 3rem;
}


.robot1{
  background: url("@/assets/layer/robotMax.png") no-repeat;
  background-size: 100% 100%;
  width: 36rem;
  color: #fff;
  height: 33rem;
  padding:1.3rem;
  pointer-events: none;
}
.robot-close{
  position: absolute;
  right: 2.5rem;
  pointer-events: visible;
  background: #094a7e;
  border-radius: 15px;
  padding: 0.4rem 1rem;
  margin-top: 1rem;
  cursor: pointer;
}
.robot2{
  background: url("@/assets/layer/robot.png") no-repeat;
  background-size: 100% 100%;
  width: 16rem;
  color: #fff;
  height: 24rem;
  padding-bottom: 3rem;
  /* float: left; */
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
  align-items: center;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
}

.robot-default {
  width: 14rem;
  height: 2.5rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/layer/safety-default.png") no-repeat;
  background-size: 100% 2.6rem;
  margin-top: 0.8rem;
  background-position-x: 0.5rem;
}
.robot-err {
  width: 13rem;
  height: 2.5rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/layer/safety-err.png") no-repeat;
  background-size: 100% 2.6rem;
  margin-top: 1.3rem;
  background-position-x: 0.3rem;
}
.robot-content{
  display: flex;
  width: 100%;
  margin-top: 0.4rem;
  height: 8.5rem;
}
.robot-quantity{
  width: 3rem;
  height: 4rem;
  background: url("@/assets/layer/quantity.png") no-repeat;
  background-size: 100% 100%;
}
.robot-code{
  width: 3rem;
  height: 4rem;
  background: url("@/assets/layer/robotId.png") no-repeat;
  background-size: 100% 100%;
}
.robot-list{
  display: flex;
  width: 100%;
}
.robot-item{
  display: flex;
  width: 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.robot-size{
  color: #51f8fb;
  margin-bottom: 0.1rem;
  font-size: 1.4rem;
}
.robot-title{
  margin-top: 2rem;
    font-size: 1.4rem;
    margin-left: 3rem;
}
  .data-msg-err {
      background: #f4433636; /* 初始背景颜色 */
      animation: changeBackgroundColor 3s infinite; /* 动画持续3秒，无限循环 */
  }
  
  @keyframes changeBackgroundColor {
      0% {
          background: #f4433636; /* 初始颜色 */
      }
      50% {
          background: #f44336d9; /* 中间过渡颜色 */
      }
      100% {
          background: #f4433636; /* 回到初始颜色 */
      }
  }

.msg-li{
  /* width: 100px; */
  float: left;
}

.msg-li span{
  display: inline-block;
  width: 26px;
  text-align: center;
}
.msg-li-value{
  background: #cccccc36;
  margin: 2px 0px;
  width: 148px !important;
  display: inline-block;
  text-align: center !important;
  border-radius: 2px;
}

.run-msg-err{
  background: #ccc;
  height: 14px;
  width: 14px;
  border-radius: 25px;
  display: inline-block;
  margin-top: 0px;
  position: relative;
  top: 3px;
}
.run-msg{
  background: #4CAF50;
  height: 14px;
  width: 14px;
  border-radius: 25px;
  display: inline-block;
  margin-top: 0px;
  position: relative;
  top: 3px;
}

::-webkit-scrollbar{
  width: 12px;
}
::-webkit-scrollbar-track{
  background: #000;
}
::-webkit-scrollbar-thumb{
  background: #4a81ad;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover{
  background: #666;
}
.left-back{
  background: url("@/assets/layer/left-back.png") no-repeat;
  background-size: 100% 100%;
}

.ant-table-row{
  background: linear-gradient(90deg, #16294559 0%, rgba(31, 65, 103, 0.1) 100%);
  border-radius: 4px 4px 4px 4px;
  height: 42px;
}
.ant-table-container{
  font-size: 19px;
}
.ant-table-cell::before{
  width: 0px !important;
}
.ant-table-tbody td {
  border-bottom: 0px solid #f0f0f0 !important;
  border: 0px solid #f0f0f0 !important;
  margin-bottom: 10px;
}
.table-row-with-spacing {
  margin-bottom: 10px; /* 或者使用 padding-bottom */
  /* 或者 */
  /* border-bottom: 10px solid transparent; */
}

.ant-table-cell-scrollbar{
  display: none;
}
.highlight{ 
  color: #74E5E6  ;
}
.highlight1{ 
  color: #E6BC74;
}
.highlight2{ 
  color: #82D2AD;
}
.highlight3{ 
  color: #17D3FF;
}
.ant-table-thead{
  background:url("@/assets/layer/table1.png") no-repeat; 
  background-size:97% 100% ;
}
.ant-select {
  background: url("@/assets/layer/select-line.png") no-repeat;
  background-size: 100% 100%;
  border: 0px !important;
}
.ant-select-selection-item {
  height: 43px;
  line-height: 43px !important;
}
.ant-table-wrapper table {
  border-spacing: 0px 10px;
}